import React, { Component } from 'react';
import GoBack from "@/components/TheGoBack";
import { QuestionCircleFilled, CloseCircleFilled } from "@ant-design/icons";
import { Space, Col, Tooltip, Row } from "antd";
import { apiShopOrderDetail } from '@/request/orderManagement';
import OrderStep from './orderStep';
import OrderMemberInfo from './orderIMemberInfo';
import OrderTable from './orderTable';
import RefoundModal from "./refund";
class Detail extends Component {
  constructor(props) {
    super(props);
    this.refundRef = React.createRef();
    this.state = {
      orderInfo: null,
    }
  }
  componentDidMount() {
    const { id } = this.props.match.params
    if (id) {
      this.getData(id)
    }
  }
  // 对账订单详情页
  getData = async (orderId) => {
    let res = await apiShopOrderDetail({ orderId })
    if (res.code === 0 && res.data) {
      this.setState({
        orderInfo: res.data
      })
    }
  }

  coerceRefund = () => {
    this.refundRef.current.open();
  };

  //售后详情
  toOrderSalesDetail = (e) => {
    this.props.history.push(`/storeBackManage/orderManage/afterSaleOrder/detail/${e}`)
  }

  render() {
    let { orderInfo } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <GoBack history={this.props.history} title={"商城订单列表 / 订单详情"} />
        {
          orderInfo && <div>
            <OrderStep orderInfo={orderInfo} coerceRefund={this.coerceRefund} ></OrderStep>
            <OrderMemberInfo memberInfo={orderInfo}></OrderMemberInfo>
            <OrderTable tableInfo={orderInfo ? orderInfo.orderDetailList : []} toOrderSalesDetail={(e) => this.toOrderSalesDetail(e)}></OrderTable>
            <Row style={{ float: 'right', marginRight: 50 }}>
              <Col>
                <Row style={{ margin: '10px 0' }}>
                  <Col>商品总价：</Col>
                  <Col>
                    <React.$Price price={orderInfo.orderTotalPrice || 0} />
                  </Col>
                </Row>
                <Row style={{ margin: '10px 0' }}>
                  <Col>运费：</Col>
                  <Col>
                    <React.$Price price={orderInfo.freight || 0} />
                  </Col>
                </Row>
                <Row style={{ margin: '10px 0' }}>
                  <Col>优惠：</Col>
                  <Col>
                    <Space>
                      <React.$Price price={orderInfo.platformDiscountPrice || 0} />
                      <Tooltip title={
                        <Space direction={"vertical"}>
                          <div>优惠券抵扣：<React.$Price price={orderInfo.couponTotal || 0} /></div>
                          <div>满减抵扣：<React.$Price price={orderInfo.fullDecrementAmount || 0} /></div>
                        </Space>
                      }>
                        <QuestionCircleFilled style={{ fontSize: 20 }} />
                      </Tooltip>
                    </Space>

                  </Col>
                </Row>
                {
                  orderInfo.isProprietary === "Y" ?
                    <Row style={{ margin: '10px 0' }}>
                      <Col>哈哈豆抵扣：</Col>
                      <Col>
                        <React.$Price price={orderInfo.integralDiscountPrice || 0} />
                      </Col>
                    </Row> : null
                }
                <Row style={{ color: "red", margin: '10px 0' }}>
                  <Col>实付金额：</Col>
                  <Col>
                    <React.$Price price={orderInfo.orderPayPrice || 0} />
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        }
        <RefoundModal
          ref={this.refundRef}
          shopOrderId={this.props.match.params.id}
          refresh={() => this.getData(this.props.match.params.id)}
          dataSource={orderInfo ? orderInfo.orderDetailList : []}
        ></RefoundModal>
      </div>
    );
  }
}

export default Detail;
